/* 
 * 1. toolbar 생성.
 * 2. 툴바에 아이템으로 기본 요소인 button 생성.
 *          iconMask = 마스크 추가로 아이콘 보이도록 하기.
 * 3. 탭바에 items 추가.  
 * 4. 탭바 속성지정.
 */
Ext.setup({
   tabletStartupScreen:"./tabletStartupScreen.png",
   phoneStartupScreen:"./phoneStartupScreen.png",
   tabletIcon:"./tabletIcon.png",
   phoneIcon:"./phoneIcon.png",
   glossOnIcon: true,
   statusBarStyle:"black",
   fullscreen:true,
   preloadImages:[],
   scope:this,
   onReady: function() {
       new Ext.TabPanel({
           fullscreen: true,  
           scroll:"vertical", 
           title:"Tabpanel test",  
           dockedItems: [{
                   xtype: 'toolbar',
                   ui: 'light',
                   dock: 'top',
                   title:"Icon Test 3"
               }, {
                   xtype: 'toolbar',
                   ui: 'light',
                   dock: 'top',
                   defaults: {
                       iconMask: true,
                       ui: 'plain',
                       handler:function(b,e) {
                           Ext.Msg.alert('Title', '선택된 아이콘.'+ b.iconCls, Ext.emptyFn);
                       }
                   },
                   scroll: {
                       direction: 'horizontal',
                       // 스크롤 바가 나오지 않도록
                       useIndicators: false
                   },
                   layout: {
                       pack: 'center'
                   },
                   items: [{
                       iconCls: 'action',
                       ui:"normal"
                   }, {
                       iconCls: 'add'
                   }, {
                       iconCls: 'arrow_up',
                       ui:"action"
                   }, {
                       iconCls: 'arrow_right'
                   }, {
                       iconCls: 'arrow_down'
                   }, {
                       iconCls: 'arrow_left',
                       ui:"round"
                   }, {
                       iconCls: 'compose'
                   }, {
                       iconCls: 'delete'
                   }, {
                       iconCls: 'refresh'
                   }, {
                       iconCls: 'reply'
                   }, {
                       iconCls: 'search'
                   }, {
                       iconCls: 'star'
                   }, {
                       iconCls: 'home'
                   }, {
                       iconCls: 'locate'
                   }, {
                       iconCls: 'maps'
                   }, {
                       iconCls: 'trash'
                   }]
               }
           ],
           items: [{
               iconCls: 'bookmarks',
               title: 'Bookmarks',
               html: 'Both toolbars and tabbars have built-in, ready to use icons. Styling custom icons is no hassle.<p><small>If you can&#8217;t see all of the buttons below, try scrolling left/right.</small></p>'
           }, {
               iconCls: 'download',
               title: 'Download',
               html: 'Pressed Download'
           }, {
               iconCls: 'favorites',
               title: 'Favorites',
               html: 'Pressed Favorites'
           }, {
               iconCls: 'info',
               title: 'Info',
               html: 'Pressed Info'
           }, {
               iconCls: 'more',
               title: 'More',
               html: 'Pressed More'
           }, {
               iconCls: 'search',
               title: 'Search',
               html: 'Pressed Search'
           }, {
               iconCls: 'settings',
               title: 'Settings',
               html: 'Pressed Settings'
           }, {
               iconCls: 'team',
               title: 'Team',
               html: 'Pressed Team'
           }, {
               iconCls: 'time',
               title: 'Time',
               html: 'Pressed Time'
           }, {
               iconCls: 'user',
               title: 'User',
               html: 'Pressed User'
           }],
           tabBar: {
               dock: 'bottom',
               scroll: {
                   direction: 'horizontal',
                   useIndicators: false
               },
               layout: {
                   pack: 'center'
               }
           }
       })
   }
});
